<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />公告详情
    </view>
	
		<view class="tit"  style="position: relative;">{{ datas.title }}</view>
		<view class="shijian">
		  <view>{{ datas.createDate }}</view>
		  <view>{{ datas.author }}</view>
		  <!-- <view class="guan" @click="guanzhu">{{ datas.isCollection > 0 ? "已收藏" : "收藏" }}</view> -->
		</view>
		<view class="xian"></view>
	<scroll-view scroll-y="true" class="scroll-view-wrap" :style="'height: calc(100vh - '+curTop+'px );'">
		<view class="con">
		  <!-- <rich-text :nodes="datas.content"></rich-text> -->
			<!-- #ifdef MP -->
      <mp-html :content="datas.content"></mp-html>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<!-- <rich-text :nodes="datas.content" @itemclick="goImgDetials"></rich-text> -->
			<!-- <view id="previewImg" v-html="datas.content" @click.stop="previewImg($event,datas.content)"></view> -->
			<view v-html="datas.content"></view>
			<!-- #endif -->
		</view>
	</scroll-view>
    <uniBall></uniBall>
  </view>
</template>

<script>
  //#ifdef H5
  import wxshare from "../../utils/index.js";
  //#endif
  import {
    mapGetters
  } from "vuex";
  export default {
    data() {
      return {
        id: "",
        datas: {},
        userInfo: uni.getStorageSync("Pduser"),
        isCollection: "",
		curTop:200
      };
    },
    computed: {
      ...mapGetters(["statusBarHeight1", "userinfo"])
    },
    onLoad(options) {
      this.id = options.id;
      this.getDetail();
      this.ll();
      /* #ifdef H5 */
      this.jinzhi();
      /* #endif */
	  
	  
    },
	onReady() {
		setTimeout(()=>{
			
		},1000)
		
	},
    methods: {
      fanhui() {
        uni.navigateBack({
          delta: 1
        });
      },
	  // 获取富文本图片预览当前下标 item当前的富文本内容 indexs当前项的下标
	    previewImg(event, item) {
	        let imgs = item.match(/<img[^>]+>/g); //把img所有节点的图片选择出来
	        var imgArr = []; //保存图片路径
	        //对图片进行处理从而获取路径
	        for (var j = 0; j < imgs.length; j++) {
	            imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
	                imgArr.push(capture)
	            })
	        }
	        // 获取要点击的富文本父盒子
			const vs = uni.createSelectorQuery().in(this);
			var box=""
			vs.select('#previewImg').boundingClientRect(vs => {
				 box= vs
				// console.log(video)
			}).exec();
	        // var box = uni.createCanvasContext('previewImg')
	        //对获取的项进行循环
	        //当点击的项的下标和循环的当前项下标相等
	        // 通过父节点获取所有图片
	        var nodes = Array.from(box[0].querySelectorAll('img'));
	        // 然后通过点击的节点知道当前节点的位置了
	        let xx = function(event) {
	    	  
	            event.stopPropagation()
	            var target = event.target;
	            console.log(target.nodeName);
	            // 判断点击的节点是否是图片
	            if (target.nodeName !== 'IMG') {
	                box[0].removeEventListener('click', xx, false);
	            }
	            if (target.nodeName === 'IMG') {
	                // console.log(nodes.indexOf(event.target));
	                // 获取点击图片的当前下标
	                let indez = nodes.indexOf(event.target)
	                //最后进行图片预览
	    	  
	                uni.previewImage({
	                    current: imgArr[indez],
	                    urls: imgArr,
	                    success: (res) => {
	                        if (box[0]) {
	                            box[0].removeEventListener('click', xx, false);
	                        }
	                    }
	                });
	            }
	        }
	        box[0].addEventListener("click", xx)
	    },
		goImgDetials(e){
			let item = e.detail.node;
			if (item.name == "img") {
				uni.previewImage({
					urls: [item.attrs.src],
					longPressActions: {
						itemList: ["保存到相册", "识别二维码"],
						itemColor: "#007AFF",
						success: function(data) {
							let {
								tapIndex,
								index
							} = data;
							// tapIndex 第几个按钮
							// index 第几张图片
							//#ifdef APP-PLUS
							if (tapIndex == 0) {
								// 保存到相册
								plus.gallery.save(item.attrs.src, () => {
									uni.showToast({
										icon: "none",
										title: "保存成功!"
									})
								}, () => {
									uni.showToast({
										icon: "none",
										title: "保存失败!"
									})
								})
						
							} else {
								// 现将文件下载到本地
								uni.downloadFile({
									url: item.attrs.src,
									success: (args) => {
										// 扫描二维码
										plus.barcode.scan(
											args.tempFilePath,
											(code, url) => {
												// 如果识别成功
												if (code == 0) {
													// 打开扫描结果
													plus.runtime.openURL(url)
												}
											},
											(err) => {
												uni.showToast({
													icon: 'none',
													title: "图中没有可识别的二维码"
												})
												console.log(err, 'err');
											},
											[plus.barcode.QR],
											true)
									},
									fail: () => {
						
									}
								})
							}
							//#endif
						}
					}
				})
			}
		},
      jinzhi() {
        let _this = this;
        let param = window.location.href.split("#")[0];
        uni.request({
          method: "post",
          data: {
            url: param
          },
          header: {
            "content-type": "application/x-www-form-urlencoded"
          },
          url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
          success(re) {
            _this.jinzhifx(re.data);
          }
        });
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ["hideMenuItems"]
        });
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            "menuItem:share:appMessage",
            "menuItem:share:timeline",
            "menuItem:share:timeline",
            "menuItem:share:qq",
            "menuItem:favorite",
            "menuItem:share:QZone",
            "menuItem:openWithSafari"
          ]
        });
      },
      ll() {
        if (!this.userinfo.phone) {
          return;
        }
        let that = this;
        this.$myRequest
          .post("/mob/user/saveUserCollection", {
            userId: this.userInfo.id,
            type: "2",
            cbType: "4",
            relationId: this.id
          })
          .then(res => {});
      },
      getDetail() {
		  let that=this
        this.$myRequest
          .get("/mob/home/getWatchDetail", {
            id: this.id,
            userId: this.userInfo.id || ""
          })
          .then(res => {
            // console.log(res);
            this.datas = res.tWatchInfo;
            this.datas.isCollection = res.isCollection;
			this.$nextTick(function(){
				// this.previewImg(null, this.datas.content)
				uni.createSelectorQuery().in(this).select('.scroll-view-wrap').boundingClientRect(result => {
				   if (result) { 
					   that.curTop=result.top
				     console.log('==========',result) 
				   }
				  }).exec(); 
			})
          });
      },
	
	// 增加帮帮豆
	addIntegral(val){
		this.$myRequest
			.post("/mob/iteration/addIntegral", {
				userId: this.userinfo.id,
				ruleNumber:val,
				title:"收藏看点"
			})
			.then(res => {
			});
	},
	
      guanzhu() {
        if (!this.showLogin()) {
          return;
        }
        let that = this;
        this.$myRequest
          .post("/mob/user/saveUserCollection", {
            userId: this.userInfo.id || "",
            type: "1",
            cbType: "4",
            relationId: this.id,
            cancel: this.datas.isCollection > 0 ? "1" : ""
          })
          .then(res => {
            uni.showToast({
              title: res.msg,
              icon: "none",
              mask: true
            });
			// if(this.datas.isCollection != 1){
			// 	this.addIntegral(5)
			// }
            setTimeout(() => {
              that.getDetail();
            }, 1000);
          });
      }
    }
  };
</script>
 
<style lang="less" scoped>
	.scroll-view-wrap{ 
		/* #ifdef MP  */
		height: calc(
		  100vh - env(safe-area-inset-bottom) / 2 - var(--status-bar-height) - 88rpx - 5px - 22px  - 176rpx
		);
		/* #endif */
		/* #ifdef H5 || APP-PULS */
		height: calc(100vh - env(safe-area-inset-bottom) / 2 - var(--status-bar-height) - 88rpx - 5px - - 5px - 176rpx);
		/* #endif */
		/* #ifdef APP */
		height: calc(100vh - env(safe-area-inset-bottom) / 2 - var(--status-bar-height) - 88rpx - 5px - 176rpx);
		/* #endif */
	}
  .box {
    width: 100%;
    min-height: 100vh;
    color: #333;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    image {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }
  }

  .tit {
    width: 690rpx;
    margin-left: 30rpx;
    margin-top: 40rpx;
    font-size: 34rpx;
    color: #333;
    font-weight: 600;
  }

  .shijian {
    margin-top: 16rpx;
    margin-left: 30rpx;

    view {
      display: inline-block;
      margin-right: 24rpx;
      height: 42rpx;
      line-height: 38rpx;
      font-size: 26rpx;
      color: #666;
    }

    .guan {
      width: 82rpx;
      height: 40rpx;
      border: 1rpx solid #64b6a8;
      text-align: center;
      font-size: 24rpx;
      border-radius: 22rpx;
      color: #64b6a8;
    }
  }

  .xian {
    width: 690rpx;
    height: 36rpx;
    margin-left: 30rpx;
    border-bottom: 2rpx solid #d0d0d0;
  }

  .con {
    padding: 30rpx;
    background: #fff;
  }
</style>